<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="<c:url value="/js/jquery.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery.form.js"/>"></script>
<script type="text/javascript">
/*function salvar() {
	$.ajax({
		type: "POST",
		url: "<c:url value="/clients/addClient"/>",
		//data: $('formulario').serialize(),
		data: 'client.name='+escape($('client.name').value)+'&client.lastName='+escape($('client.lastName').value),
		success: function() {
			atualizarLista();
		}
	});	
}
function atualizarLista(){
	$.ajax({
		type: "GET",
		url: "<c:url value="/clients/list"/>",
		success: function(data) {
			alert(data);
			document.getElementById("listaClientes").innerHTML=data;
		}
	});	
}*/

$(document).ready(function() {
	try{
    var options = { 
        target:        '#listaClientes',   // target element(s) to be updated with server response 
       // beforeSubmit:  showRequest,  // pre-submit callback 
       // success:       showResponse  // post-submit callback 
 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
    $('#formulario').ajaxForm(options);
	}catch(e){alert(e);return false;}
}); 
 
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    alert('About to submit: \n\n' + queryString); 
    return true; 
} 
 
function showResponse(responseText, statusText, xhr, $form)  { 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\nThe output div should have already been updated with the responseText.'); 
}  
</script>


<form action="<c:url value="/clients/addClient"/>" method="post" id="formulario">

	Nome: <input type="text" name="client.name" id="client.name"/><br/>
	Sobrenome: <input type="text" name="client.lastName" id="client.lastName"/><br/>
	<!--input type="button" onclick="salvar();" value="Salvar"/-->
	<input type="submit"/>
	
</form>

<br/><br/><br/>

<div id="listaClientes">
<ul>
<c:forEach var="item" items="${clientList}">
  	<li>${item.name} ${item.lastName}</li>
</c:forEach>
</ul>
</div>
